fix(select, action-sheet): use radio role for options #30769

thetaPC · 2025-11-05T18:17:26Z

Issue number: internal

What is the current behavior?

The screen reader does not announce when an option is selected within the action sheet interface. This is because the action sheet uses standard buttons, which do not support a detectable selected state via native properties or ARIA attributes like aria-checked or aria-selected, creating an inconsistent user experience across different interface types.

What is the new behavior?

Updated the action sheet buttons to accept role="radio"
Added keyboard navigation to follow the pattern for radio group
Added test

Does this introduce a breaking change?

Yes
No

Other information

Basic

vercel · 2025-11-05T18:18:54Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
ionic-framework	Ready	Preview	Comment	Nov 26, 2025 5:44pm

ShaneK

Looks good to me! Extremely minor grammatical nits, feel free to ignore if you don't wanna run CI just for them 🤷‍♂️

core/src/components/select/test/a11y/select.e2e.ts

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

ShaneK

Looking good, just a couple of minor things

core/src/components/action-sheet/action-sheet.tsx

ShaneK · 2025-11-14T20:33:58Z

core/src/components/action-sheet/action-sheet.tsx

+  @Watch('buttons')
+  buttonsChanged() {
+    // Initialize activeRadioId when buttons change
+    if (this.hasRadioButtons) {


My only concern here is this.hasRadioButtons is only set in connectedCallback, I believe this means if buttons are set dynamically this value may become stale and this process may not trigger when it's supposed to. That's sort of an edge case for many, but it may be worth re-computing this.hasRadioButtons here, if you feel like this could be a concern. Up to you!

Co-authored-by: Shane <shane@shanessite.net>

brandyscarney

Overall this looks good, just one concern on the role!

brandyscarney · 2025-11-25T19:41:46Z

core/src/components/select/select.tsx


      return {
-        role: isOptionSelected(selectValue, value, this.compareWith) ? 'selected' : '',
+        role: 'radio',


Why did you decide to pass role here instead of providing it as an htmlAttribute?

I'm worried this might introduce a breaking change.

For example, if anyone is relying on the role being returned as selected when clicking it and handling it through the following event:

window.addEventListener('ionActionSheetDidDismiss', function (e) { console.log('didDismiss', e.detail); });

this would no longer work as expected.

While it's technically possible, relying on the role from the action sheet closing event is a bit of a weird way to do things. The best practice is to just use the <ion-select>'s own ionChange event. That's why I decided to fix the role, especially because the dismissal event would only pass back 'selected' if the user happened to click on an option that was already chosen.

Example:

No selection has occurred

User clicks on "apple"

e.detail.role=""

User clicks on "apple" again

e.detail.role="selected"

core/src/components/action-sheet/action-sheet.tsx

brandyscarney · 2025-11-25T21:47:27Z

core/src/components/action-sheet/action-sheet.tsx

+  onKeydown(ev: KeyboardEvent) {
+    // Only handle keyboard navigation if we have radio buttons
+    if (!this.hasRadioButtons || !this.presented) {
+      return;
+    }
+
+    const target = ev.target as HTMLElement;
+
+    // Ignore if the target element is not within the action sheet or not a radio button
+    if (
+      !this.el.contains(target) ||
+      !target.classList.contains('action-sheet-button') ||
+      target.getAttribute('role') !== 'radio'
+    ) {
+      return;
+    }
+
+    // Get all radio button elements and filter out disabled ones
+    const radios = Array.from(this.el.querySelectorAll('.action-sheet-button[role="radio"]')).filter(
+      (el) => !(el as HTMLButtonElement).disabled
+    ) as HTMLButtonElement[];
+
+    const currentIndex = radios.findIndex((radio) => radio.id === target.id);
+    if (currentIndex === -1) {
+      return;
+    }
+
+    let nextEl: HTMLButtonElement | undefined;
+
+    if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      nextEl = currentIndex === radios.length - 1 ? radios[0] : radios[currentIndex + 1];
+    } else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      nextEl = currentIndex === 0 ? radios[radios.length - 1] : radios[currentIndex - 1];
+    } else if (ev.key === ' ' || ev.key === 'Enter') {
+      ev.preventDefault();
+      ev.stopPropagation();
+
+      const allButtons = this.getButtons();
+      const radioButtons = this.getRadioButtons();
+      const buttonIndex = radioButtons.findIndex((b) => {
+        const buttonId = this.getButtonId(b, allButtons.indexOf(b));
+        return buttonId === target.id;
+      });
+
+      if (buttonIndex !== -1) {
+        this.selectRadioButton(radioButtons[buttonIndex]);
+        this.buttonClick(radioButtons[buttonIndex]);
+      }
+
+      return;
+    }
+
+    // Focus the next radio button
+    if (nextEl) {
+      const allButtons = this.getButtons();
+      const radioButtons = this.getRadioButtons();
+
+      const buttonIndex = radioButtons.findIndex((b) => {
+        const buttonId = this.getButtonId(b, allButtons.indexOf(b));
+        return buttonId === nextEl?.id;
+      });
+
+      if (buttonIndex !== -1) {
+        this.selectRadioButton(radioButtons[buttonIndex]);
+        nextEl.focus();
+      }
+    }
+  }


Suggested change

onKeydown(ev: KeyboardEvent) {

// Only handle keyboard navigation if we have radio buttons

if (!this.hasRadioButtons || !this.presented) {

return;

}

const target = ev.target as HTMLElement;

// Ignore if the target element is not within the action sheet or not a radio button

if (

!this.el.contains(target) ||

!target.classList.contains('action-sheet-button') ||

target.getAttribute('role') !== 'radio'

) {

return;

}

// Get all radio button elements and filter out disabled ones

const radios = Array.from(this.el.querySelectorAll('.action-sheet-button[role="radio"]')).filter(

(el) => !(el as HTMLButtonElement).disabled

) as HTMLButtonElement[];

const currentIndex = radios.findIndex((radio) => radio.id === target.id);

if (currentIndex === -1) {

return;

}

let nextEl: HTMLButtonElement | undefined;

if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {

ev.preventDefault();

ev.stopPropagation();

nextEl = currentIndex === radios.length - 1 ? radios[0] : radios[currentIndex + 1];

} else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {

ev.preventDefault();

ev.stopPropagation();

nextEl = currentIndex === 0 ? radios[radios.length - 1] : radios[currentIndex - 1];

} else if (ev.key === ' ' || ev.key === 'Enter') {

ev.preventDefault();

ev.stopPropagation();

const allButtons = this.getButtons();

const radioButtons = this.getRadioButtons();

const buttonIndex = radioButtons.findIndex((b) => {

const buttonId = this.getButtonId(b, allButtons.indexOf(b));

return buttonId === target.id;

});

if (buttonIndex !== -1) {

this.selectRadioButton(radioButtons[buttonIndex]);

this.buttonClick(radioButtons[buttonIndex]);

}

return;

}

// Focus the next radio button

if (nextEl) {

const allButtons = this.getButtons();

const radioButtons = this.getRadioButtons();

const buttonIndex = radioButtons.findIndex((b) => {

const buttonId = this.getButtonId(b, allButtons.indexOf(b));

return buttonId === nextEl?.id;

});

if (buttonIndex !== -1) {

this.selectRadioButton(radioButtons[buttonIndex]);

nextEl.focus();

}

}

}

onKeydown(ev: KeyboardEvent) {

// Only handle keyboard navigation if we have radio buttons

if (!this.hasRadioButtons || !this.presented) {

return;

}

const target = ev.target as HTMLElement;

// Ignore if the target element is not within the action sheet or not a radio button

if (

!this.el.contains(target) ||

!target.classList.contains('action-sheet-button') ||

target.getAttribute('role') !== 'radio'

) {

return;

}

// Get all radio button elements and filter out disabled ones

const radios = Array.from(this.el.querySelectorAll('.action-sheet-button[role="radio"]')).filter(

(el) => !(el as HTMLButtonElement).disabled

) as HTMLButtonElement[];

const currentIndex = radios.findIndex((radio) => radio.id === target.id);

if (currentIndex === -1) {

return;

}

const allButtons = this.getButtons();

const radioButtons = this.getRadioButtons();

// Build a map of button element IDs to their ActionSheetButton config objects.

// This allows us to quickly look up which button config corresponds to a DOM element

// when handling keyboard navigation (e.g., when user presses Space/Enter or arrow keys).

// The key is the ID that was set on the DOM element during render, and the value is

// the ActionSheetButton config that contains the handler and other properties.

const buttonIdMap = new Map<string, ActionSheetButton>();

radioButtons.forEach((b) => {

const allIndex = allButtons.indexOf(b);

const buttonId = this.getButtonId(b, allIndex);

buttonIdMap.set(buttonId, b);

});

let nextEl: HTMLButtonElement | undefined;

if (['ArrowDown', 'ArrowRight'].includes(ev.key)) {

ev.preventDefault();

ev.stopPropagation();

nextEl = currentIndex === radios.length - 1 ? radios[0] : radios[currentIndex + 1];

} else if (['ArrowUp', 'ArrowLeft'].includes(ev.key)) {

ev.preventDefault();

ev.stopPropagation();

nextEl = currentIndex === 0 ? radios[radios.length - 1] : radios[currentIndex - 1];

} else if (ev.key === ' ' || ev.key === 'Enter') {

ev.preventDefault();

ev.stopPropagation();

const button = buttonIdMap.get(target.id);

if (button) {

this.selectRadioButton(button);

this.buttonClick(button);

}

return;

}

// Focus the next radio button

if (nextEl) {

const button = buttonIdMap.get(nextEl.id);

if (button) {

this.selectRadioButton(button);

nextEl.focus();

}

}

}

Simplify to avoid querying the buttons multiple times. You may want to make this change yourself instead of accepting mine as I probably messed up spacing when I pasted.

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

thetaPC added 2 commits November 4, 2025 12:07

fix(select): add aria-selected to button option

d5197be

fix(select): use aria description for selected option

8df50f4

github-actions bot added the package: core @ionic/core package label Nov 5, 2025

docs(select): remove comment

398ae6d

thetaPC changed the title ~~Fw 6818~~ fix(select): use aria description for selected option Nov 5, 2025

vercel bot deployed to Preview November 5, 2025 18:22 View deployment

test(select): check for aria description

3f3ffae

thetaPC changed the title ~~fix(select): use aria description for selected option~~ fix(select): use aria description for selected option within action sheet Nov 5, 2025

vercel bot deployed to Preview November 5, 2025 20:43 View deployment

thetaPC marked this pull request as ready for review November 5, 2025 21:11

thetaPC requested a review from a team as a code owner November 5, 2025 21:11

thetaPC requested a review from gnbm November 5, 2025 21:11

ShaneK approved these changes Nov 7, 2025

View reviewed changes

core/src/components/select/test/a11y/select.e2e.ts Outdated Show resolved Hide resolved

core/src/components/select/test/a11y/select.e2e.ts Outdated Show resolved Hide resolved

refactor(action-sheet): accept radio role buttons

e1f83b0

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>

vercel bot had a problem deploying to Preview November 12, 2025 22:44 Failure

refactor(action-sheet): remove unused code

6aab5bd

vercel bot deployed to Preview November 12, 2025 22:46 View deployment

thetaPC changed the title ~~fix(select): use aria description for selected option within action sheet~~ fix(select, action-sheet): use radio role for options Nov 13, 2025

ShaneK requested changes Nov 14, 2025

View reviewed changes

Update core/src/components/action-sheet/action-sheet.tsx

626370b

Co-authored-by: Shane <shane@shanessite.net>

vercel bot deployed to Preview November 15, 2025 02:09 View deployment

refactor(action-sheet): update to accept dynamic roles

c150a61

vercel bot deployed to Preview November 15, 2025 02:19 View deployment

ShaneK approved these changes Nov 16, 2025

View reviewed changes

brandyscarney reviewed Nov 25, 2025

View reviewed changes

Update core/src/components/action-sheet/action-sheet.tsx

73149c9

Co-authored-by: Brandy Smith <brandyscarney@users.noreply.github.com>

vercel bot deployed to Preview November 26, 2025 17:32 View deployment

refactor(action-sheet): use button map

8314a54

vercel bot deployed to Preview November 26, 2025 17:44 View deployment

thetaPC requested a review from brandyscarney November 26, 2025 18:27

fix(select, action-sheet): use radio role for options #30769

Are you sure you want to change the base?

fix(select, action-sheet): use radio role for options #30769

Conversation

thetaPC commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What is the current behavior?

What is the new behavior?

Does this introduce a breaking change?

Other information

Uh oh!

vercel bot commented Nov 5, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

ShaneK left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

ShaneK Nov 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thetaPC Nov 15, 2025

Choose a reason for hiding this comment

Uh oh!

brandyscarney left a comment

Choose a reason for hiding this comment

Uh oh!

brandyscarney Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

thetaPC Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

brandyscarney Nov 25, 2025

Choose a reason for hiding this comment

Uh oh!

thetaPC Nov 26, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

thetaPC commented Nov 5, 2025 •

edited

Loading

vercel bot commented Nov 5, 2025 •

edited

Loading

ShaneK Nov 14, 2025 •

edited

Loading